<template>
  <div class="create_or_edit">
    <el-page-header @back="goBack" :content="title"></el-page-header>
    <el-button type="primary" class="topSave">保存</el-button>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-steps :active="currentStep" simple>
          <el-step title="基本信息" icon="el-icon-edit" @click.native="currentStep=0"></el-step>
          <el-step title="课程封面" icon="el-icon-upload" @click.native="currentStep=1"></el-step>
          <el-step title="销售信息" icon="el-icon-picture" @click.native="currentStep=2"></el-step>
          <el-step title="秒杀活动" icon="el-icon-picture" @click.native="currentStep=3"></el-step>
          <el-step title="课程详情" icon="el-icon-picture" @click.native="currentStep=4"></el-step>
        </el-steps>
      </div>
      <el-form ref="form" :model="course" label-width="80px">
        <!-- 基本信息-->
        <div v-show="currentStep==0">
          <el-form-item label="课程名称">
            <el-input v-model="course.courseName" maxlength="100">
              <template slot="append">{{ course.courseName.length }}/100</template>
            </el-input>
          </el-form-item>
          <el-form-item label="课程编码">
            <el-input v-model="course.courseCode"></el-input>
          </el-form-item>
          <el-form-item label="课程简介">
            <el-input v-model="course.remark"></el-input>
          </el-form-item>
          <el-form-item label="教师名称">
            <el-input v-model="course.teacherBo.teacherName"></el-input>
          </el-form-item>
          <el-form-item label="毕业学校">
            <el-input v-model="course.teacherBo.belongsSchool"></el-input>
          </el-form-item>
          <el-form-item label="课程排序">
            <el-input type="number" v-model="course.sortNum"></el-input>
          </el-form-item>
        </div>
        <div v-show="currentStep==1">
          <el-form-item label="展示图片">
            <!--  v-model 默认会监听子组件的 input 事件，并更新对应的父组件数据-->
            <UploadFile v-model="course.courseListImg"></UploadFile>
<!--            <UploadFile-->
<!--                :value="course.courseListImg"-->
<!--                @input="course.courseListImg = $event"-->
<!--            ></UploadFile>-->
          </el-form-item>
          <el-form-item label="解锁图片">
            <UploadFile v-model="course.courseunLockImg"></UploadFile>
          </el-form-item>


        </div>

        <div v-show="currentStep==2"><h1>销售信息</h1></div>
        <div v-show="currentStep==3"><h1>秒杀活动</h1></div>
        <div v-show="currentStep==4"><h1>课程详情</h1></div>
        <el-form-item class="form-btn">
          <el-button @click="nextStep" v-if="currentStep!==4">下一步</el-button>
          <el-button type="primary" v-else>保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import UploadFile from '@/components/upload/uploadFile.vue'

export default {
  name: "createUpdateIndex",
  components: {UploadFile: UploadFile},
  props: {
    courseId: {
      type: [Number, String]
    }
  },
  data() {
    return {

      //步骤条当前步骤
      currentStep: 0,
      //当前课程
      course: {
        courseName: '',
        courseCode: '',
        sortNum: 0,
        //课程封面
        courseListImg: '',
        //课程解锁
        courseunLockImg: '',
        //简介
        remark: '',
        teacherBo: {
          teacherName: '',
          belongsSchool: '',
        }
      },
    }
  },
  computed: {
    title() {
      return this.courseId ? '编辑课程' : '新建课程'
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      console.log(this.courseId);
    },
    goBack() {
      console.log('go back');
      this.$router.go(-1)
    },
    //下一步
    nextStep() {
      this.currentStep = (this.currentStep + 1) % 5
    },

    // handleAvatarSuccess(res, file) {
    //   this.imageUrl = URL.createObjectURL(file.raw);
    // },
    // //上传图片之前的方法
    // beforeAvatarUpload(file) {
    //   //内存生成一个图片
    //   this.course.courseListImg=URL.createObjectURL(file);
    //   const isJPG = file.type === 'image/jpeg';
    //   const isLt2M = file.size / 1024 / 1024 < 2;
    //
    //   if (!isJPG) {
    //     this.$message.error('上传头像图片只能是 JPG 格式!');
    //   }
    //   if (!isLt2M) {
    //     this.$message.error('上传头像图片大小不能超过 2MB!');
    //   }
    //   return isJPG && isLt2M;
    // }
  }

}
</script>


<style scoped>
.topSave {
  float: right;
  margin-top: -50px;
}

.el-page-header {
  margin-bottom: 20px;
}

.el-step {
  cursor: pointer;
}

.form-btn {
  text-align: center;
}

.el-form {
  padding: 0px 230px 0px 70px;
}


</style>
